<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>地址</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../plugins/mui/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../plugins/mui/picker/mui.picker.css"/>
		<link rel="stylesheet" href="../../plugins/mui/picker/mui.poppicker.css" />
		<script src="../../js/statistics.js"></script>
		<style type="text/css">
			 *{
            box-sizing: border-box;
            font-family: 'Microsoft YaHei';
	        }
	        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form,  input, p, table, th, td ,select,option{
	            padding: 0;
	            margin: 0;
	            list-style: none;
	        }
	        body{
	        	padding-top:45px;
	        	padding-bottom:10px;
	        }
	        .clearfix:before{
            display:table;
            content:'';
	        }
	        .clearfix:after{
	            display:table;
	            content:'';
	            clear:both;
	        }
			/*title的样式覆盖*/
			.mui-bar{
				background-color:#43ac45;
				top:0;
			}
			.mui-bar>a{
				color:#fff;
			}
			.mui-title{
				color:#fff;
			}
			.mui-input-row:after{
				display:none;
			}
			.mui-input-group:before{
				display:none;
			}
			.mui-input-group:after{
				display:none;
			}
			#input1::-webkit-input-placeholder{
				line-height: 22px;
			}
			/*百分比优化*/
			.mui-input-clear{
				padding: 11px 4%;
			}
			
			
			/*选择框的按钮覆盖*/
			.mui-btn-blue{
				border-color:#43AC45;
				background-color:#43AC45;
			}
			.mui-btn-block{
				padding:9px 0;
			}
			
			input[type=text]{
				padding:10px 4%;
				/*padding-right:calc(2%  + 38px);*/
			}
		</style>
	</head>
	<body>
		<header class="mui-bar ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">地址</h1>
			<a  class=" mui-pull-right"  id="save1" style='line-height:44px;font-weight: 500;font-size:15px;'>保存</a>
		</header>
		
		<form class="mui-input-group" style='margin-top:10px;'>
		    <div class="mui-input-row" style='border-bottom: 1px solid #e5e5e5;'>
		        <input type="text" class="mui-input-clear" placeholder="请选择城市" style='line-height: 20px;' readonly="true" id='showCityPicker'>
		    </div>
		    <div class="mui-input-row">
		        <input type="text" class="mui-input-clear" placeholder="请输入详细地址" style='line-height: 20px;' id='input1' maxlength="40">
		    </div>
		</form>
		
		<script type="text/javascript" src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
		<script src="../../plugins/mui/mui.min.js"></script>
		<script type="text/javascript" src="../../plugins/mui/picker/mui.picker.js"></script>
		<script type="text/javascript" src="../../plugins/mui/picker/mui.poppicker.js"></script>
		<script type="text/javascript" src="../../js/my/user/userCity.js"></script>
		<script src="../../js/getApiToken.js"></script>
		<script src="../../js/md5.js"></script>
		<script type="text/javascript">
			var first=0;
			mui.plusReady(function(){
				
				//输入框calc兼容
				$('input[type=text]').css({'padding-right':document.body.clientWidth*0.02+38+'px'});
							
				if(plus.storage.getItem('cg_city')){
						$('#showCityPicker').val(plus.storage.getItem('cg_city').split('|')[1]+' '+plus.storage.getItem('cg_city').split('|')[3]);
						
				}
				if(plus.storage.getItem('cg_address')!='null'){
						$('#input1').val(plus.storage.getItem('cg_address'));
				}
				//关闭等待框
				plus.nativeUI.closeWaiting();
				//显示当前页面
				mui.currentWebview.show('slide-in-right',200);
				
				//保存函数
				var save1 = document.getElementById('save1');
				save1.addEventListener('tap',function(){
					if(showCityPicker.value==''){
						mui.toast('请选择城市');
					}else if((showCityPicker.value.split(' ')[1]==plus.storage.getItem('cg_city').split('|')[3])&&(input1.value.trim()==plus.storage.getItem('cg_address'))&&$('#input1').val()){
		    			mui.toast('地址未修改');
		    		}else if(input1.value.trim()==''){
						mui.toast('请输入详细地址');
					}else{
						if(!$('#showCityPicker').data('city')){
							$('#showCityPicker').data('city','320000|江苏省|320400|常州市');
						}
						plus.nativeUI.showWaiting('保存中...');
						myAjax('personal/user_profile/updateUserProfile', 'post', {
								'user_id': plus.storage.getItem('cg_user_id'),
								'user_token': plus.storage.getItem('cg_user_token'),
								'city':$('#showCityPicker').data('city'),
								'address':$('#input1').val().trim()
							}, function(data) {
								
								plus.nativeUI.closeWaiting();
								if(data.success){
									 //修改本地城市
									plus.storage.setItem('cg_city', $('#showCityPicker').data('city'));
									//修改本地详细地址
									plus.storage.setItem('cg_address', $('#input1').val().trim());
									var main = plus.webview.getWebviewById('user.html');//或者通过A页面id获取A页面对象
									mui.fire(main, "pageflowrefresh" ,{'city':$('#showCityPicker').data('city')});//出发A页面的pageflowrefresh方法
									mui.toast('地址修改成功');
									plus.webview.currentWebview().close();
								}else{
									mui.toast(data.error_msg);
								}
						})
					
					}
				})
				
				var cityPicker = new mui.PopPicker({
					layer: 2
				});
				cityPicker.setData(cityData);
				var showCityPickerButton = document.getElementById('showCityPicker');
//					var cityResult = doc.getElementById('cityResult');
				showCityPickerButton.addEventListener('tap', function(event) {
					//选择框后,输入框的消失
					$('#input1').blur();
					if(!first){
						cityPicker.pickers[0].setSelectedValue(plus.storage.getItem('cg_city').split('|')[0]);
						setTimeout(function(){
							cityPicker.pickers[1].setSelectedValue(plus.storage.getItem('cg_city').split('|')[2]);	
						},100);
						first++;
					}


					cityPicker.show(function(items) {
						showCityPickerButton.value = items[0].text + " " + items[1].text;
						$('#showCityPicker').data('city',items[0].value+'|'+items[0].text+'|'+items[1].value+'|'+items[1].text);	
					});
				}, false);
				
			});
		</script>
	</body>
</html>



